import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Descriptions, Button, Space } from 'antd'
import {
    ArrowLeftOutlined
} from '@ant-design/icons'
import joe from 'joe-tools'


export default function NewsPreview() {
    const [fromInfo, setFormInfo] = useState({})
    const paramInfo = useLocation()
    const auditList = ['未审核', '审核中', '已通过', '未通过']
    const publishList = ['未发布', '待发布', '已上线', '已下线']
    const colorList = ['', 'orange', 'green', 'red']
    useEffect(() => {
        setFormInfo(paramInfo.state)
    }, [])
    return (
        <div>
            <div className='header'>
                <Button style={{ border: 'none', fontSize: 16 }} icon={<ArrowLeftOutlined />} onClick={() => window.history.back()} /> {fromInfo.title}
                <span className='subhead'>{fromInfo.categoryId}</span>
            </div>
            <Descriptions title="">
                <Descriptions.Item label="创建者">{fromInfo.author}</Descriptions.Item>
                <Descriptions.Item label="创建时间">{joe.dateFormat(fromInfo.createTime)}</Descriptions.Item>
                <Descriptions.Item label="发布时间">---</Descriptions.Item>
                <Descriptions.Item label="区域">{fromInfo.region}</Descriptions.Item>
                <Descriptions.Item label="审核状态"><span style={{ color: colorList[fromInfo.auditState] }}>{auditList[fromInfo.auditState]}</span></Descriptions.Item>
                <Descriptions.Item label="发布状态"><span style={{ color: colorList[fromInfo.publishState] }}>{publishList[fromInfo.publishState]}</span></Descriptions.Item>
                <Descriptions.Item label="访问数量"><span style={{ color: 'green' }}>{fromInfo.view}</span></Descriptions.Item>
                <Descriptions.Item label="点赞数量"><span style={{ color: 'green' }}>{fromInfo.star}</span></Descriptions.Item>
                <Descriptions.Item label="评论数量"><span style={{ color: 'green' }}>{0}</span></Descriptions.Item>
            </Descriptions>
            <Space>
                <span>新闻主题内容：</span>
                <div className='content' dangerouslySetInnerHTML={{ __html: fromInfo.content }} />
            </Space>
        </div >
    )
} 